<!--近六个月出租率走势-->
<template>
  <a-card
    style="height: 100%; width: 100%; display: flex; flex-direction: column"
    :bodyStyle="{flex: 1,height: 0, padding: '24px'}"
  >
    <template #title>
      <a-tabs v-model:activeKey="titleKey" size="small" @change="getData">
        <a-tab-pane
          v-for="item of tabList"
          :key="item.key"
          :tab="item.tab"></a-tab-pane>
      </a-tabs>
    </template>
    <a-spin :spinning="spinning">
      <div class="chart-box">
        <div id="lettingRateEchart" class="chart"></div>
      </div>
    </a-spin>
  </a-card>
</template>
<script>
import {
  defineComponent,
  ref,
  onMounted,
  reactive,
  toRefs, onUnmounted,
} from "vue";
import { message } from "ant-design-vue";
import { Chart } from "@antv/g2";
import request from "../../../common/utils/request";
import _ from "lodash";
export default defineComponent({
  name: "lettingRate",
  components: {

  },
  setup(props, context) {
    const state = reactive({
      titleKey: '1',
      tabList: [
        {
          key: '1',
          tab: '近6个月出租率走势',
        },
        {
          key: '2',
          tab: '近6个月合同成交走势',
        },
      ],
      spinning: false,
      chart: {},
      listTimer: null,
    })

    const getData = () => {
      clearTimeout(state.listTimer);
      state.listTimer = setTimeout(() => {
        state.spinning = true;
        request
          .get("/org", "/workbench/rentRateTrendList", {tab: state.titleKey})
          .then((res) => {
            if (state.titleKey === '1') {
              state.chart.axis('total', {
                label: {
                  formatter: (val) => {
                    return val + '%';
                  },
                },
              });
            } else {
              state.chart.axis('total', {
                label: {
                  formatter: (val) => {
                    return val + 'm²';
                  },
                },
              });
            }
            state.chart.changeData(res.list);
            state.chart.render();
            state.spinning = false;
          }).catch((err) => {
          state.spinning = false;
        });
      }, 500)
    }

    const renderChart = () => {
      state.chart = new Chart({
        container: 'lettingRateEchart',
        autoFit: true,
      });

      state.chart.scale( 'total' , {
        min: 0,
        nice: true,
      });
      state.chart.tooltip({
        showCrosshairs: true,
        shared: true,
      });

      state.chart.legend("name", {
        position: "top-left",
      });

      state.chart
        .line()
        .position('date*total')
        .color('name')

      state.chart
        .point()
        .position('date*total')
        .color('name')
        .shape('circle')
        .style({
          stroke: '#fff',
          lineWidth: 1,
        });
      getData();
      state.chart.render();
    }



    onMounted(() => {
      renderChart();
    });

    onUnmounted(() => {
      if (!_.isEmpty(state.chart)) {
        state.chart.destroy();
      }
    })


    return {
      ...toRefs(state),
      getData,
    };
  },
});
</script>

<style lang="less" scoped>
.chart-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .chart {
    flex: 1;
  }
}
:deep(.ant-tabs-bar) {
  padding: 0!important;
}
:deep(.ant-tabs-bar) {
  border-bottom: none!important;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>